<template>
  <div class="content">
    <div id="components-form-demo-advanced-search">
      <a-form class="ant-advanced-search-form home-form" :form="form" @submit="handleSearch">
        <a-row :gutter="24">
          <a-col :span="24">
            <div id="return"><span>回访管理</span></div>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="6" v-if="typeValue == 4 || typeValue == 6">
            <a-form-item label="关键字">
              <a-input class="field-right" v-decorator="[`key`]" :allowClear="true" />
            </a-form-item>
          </a-col>
          <a-col :span="6" v-if="typeValue == 6">
            <a-form-item label="分值">
              <a-input-number placehold="最小分值" :min="0" :max="5" :step="0.1" v-decorator="[`score1`]"
                              style="width: 46%;" @blur="e => changeNum(e, 1)"
              /> -
              <a-input-number placehold="最大分值" :min="0" :max="5" :step="0.1" v-decorator="[`score2`]"
                              style="width: 46%;" @blur="e => changeNum(e, 2)"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="时间">
              <a-range-picker v-decorator="[`data`]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-button type="primary" html-type="submit">
              <a-icon type="search" />搜索
            </a-button>
            <a-button class="btn1" @click="handleReset">
              <a-icon type="sync" />重置
            </a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div style="margin-top:12px;">
      <a-tabs default-active-key="1" @change="callback">
        <a-tab-pane key="4" tab="未回访">
          <el-table :data="tableData" v-loading="loading" :max-height="tableHeight" border style="width: 100%">
            <el-table-column min-width="155" label="来电人">
              <template slot-scope="scope">
                <i class="iconfont icon-sexm" v-if="scope.row.Sex == 1"></i>
                <i class="iconfont icon-sexw" v-if="scope.row.Sex == 2"></i>
                <span style="margin-left: 10px">{{ scope.row.Name }}</span>
              </template>
            </el-table-column>
            <el-table-column min-width="140" label="来电号码">
              <template slot-scope="scope">
                <span>{{ scope.row.Phone }}</span>
              </template>
            </el-table-column>
            <el-table-column min-width="100" label="状态">
              <template slot-scope="scope">
                <a-tag color="orange" v-if="scope.row.State == 4">未回访</a-tag>
                <a-tag color="green" v-else>已回访</a-tag>
              </template>
            </el-table-column>
            <el-table-column min-width="100" label="綜合评分">
              <template slot-scope="scope">
                <span>{{ scope.row.AverageScore }}</span>
              </template>
            </el-table-column>
            <el-table-column min-width="180" label="问题描述" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{ scope.row.Content }}</span>
              </template>
            </el-table-column>
            <el-table-column min-width="180" label="区域/部门">
              <template slot-scope="scope">
                <span>{{ scope.row.DepartName }}</span>
              </template>
            </el-table-column>
            <el-table-column min-width="80" label="负责人">
              <template slot-scope="scope">
                <span>{{ scope.row.ChargeUserName }}</span>
              </template>
            </el-table-column>
            <el-table-column min-width="80" label="跟进人">
              <template slot-scope="scope">
                <span>{{ scope.row.FollowUserName }}</span>
              </template>
            </el-table-column>
            <el-table-column min-width="220" label="接听人/接听时间">
              <template slot-scope="scope">
                <span>{{ scope.row.AnswerUserName }}　 {{ scope.row.AnswerTime }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" width="226">
              <template slot="header" slot-scope="scope">
                操作
              </template>
              <template slot-scope="scope">
                <el-tag v-if="operation.findIndex(d => d.Name === '回访') !=-1" @click="detail(scope.row,1)"><i class="el-icon-edit-outline"></i>回访</el-tag>
                <el-tag v-if="operation.findIndex(d => d.Name === '详情') !=-1" type="success" @click="detail(scope.row,2)"><i class="el-icon-document"></i>详情</el-tag>
                <el-tag v-if="scope.row.isSuper == true" type="danger" @click="deleteList(scope.row)"><i class="el-icon-delete"></i>删除</el-tag>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage"
                         :page-sizes="pagination.pageSizeOptions" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
                         :total="pagination.total"
          >
          </el-pagination>
        </a-tab-pane>
        <a-tab-pane key="6" tab="已回访" force-render>
          <el-table :data="tableData" v-loading="loading" :max-height="tableHeight" border style="width: 100%">
            <el-table-column min-width="155" label="来电人">
              <template slot-scope="scope">
                <i class="iconfont icon-sexm" v-if="scope.row.Sex == 1"></i>
                <i class="iconfont icon-sexw" v-if="scope.row.Sex == 2"></i>
                <span style="margin-left: 10px">{{ scope.row.Name }}</span>
              </template>
            </el-table-column>
            <el-table-column min-width="140" label="来电号码">
              <template slot-scope="scope">
                <span>{{ scope.row.Phone }}</span>
              </template>
            </el-table-column>
            <el-table-column min-width="100" label="状态">
              <template slot-scope="scope">
                <a-tag color="orange" v-if="scope.row.State == 4">未回访</a-tag>
                <a-tag color="green" v-else>已回访</a-tag>
              </template>
            </el-table-column>
            <el-table-column min-width="100" label="綜合评分">
              <template slot-scope="scope">
                <span>{{ scope.row.AverageScore }}</span>
              </template>
            </el-table-column>
            <el-table-column min-width="180" label="问题描述" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{ scope.row.Content }}</span>
              </template>
            </el-table-column>
            <el-table-column min-width="180" label="区域/部门">
              <template slot-scope="scope">
                <span>{{ scope.row.DepartName }}</span>
              </template>
            </el-table-column>
            <el-table-column min-width="80" label="负责人">
              <template slot-scope="scope">
                <span>{{ scope.row.ChargeUserName }}</span>
              </template>
            </el-table-column>
            <el-table-column min-width="80" label="跟进人">
              <template slot-scope="scope">
                <span>{{ scope.row.FollowUserName }}</span>
              </template>
            </el-table-column>
            <el-table-column min-width="220" label="接听人/接听时间">
              <template slot-scope="scope">
                <span>{{ scope.row.AnswerUserName }}　 {{ scope.row.AnswerTime }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" width="110">
              <template slot="header" slot-scope="scope">
                操作
              </template>
              <template slot-scope="scope">
                <el-tag v-if="operation.findIndex(d => d.Name === '详情') !=-1" type="success" @click="detail(scope.row,2)"><i class="el-icon-document"></i>详情</el-tag>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage"
                         :page-sizes="pagination.pageSizeOptions" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
                         :total="pagination.total"
          >
          </el-pagination>
        </a-tab-pane>
        <a-tab-pane key="5" tab="统计">
          <el-table :data="tableData1" v-loading="loading" :max-height="tableHeight" border style="width: 100%">
            <el-table-column min-width="180" label="0-1分">
              <template slot-scope="scope">
                <span>{{ scope.row.Num1 }}人</span>
              </template>
            </el-table-column>
            <el-table-column min-width="180" label="1-2分">
              <template slot-scope="scope">
                <span>{{ scope.row.Num2 }}人</span>
              </template>
            </el-table-column>
            <el-table-column min-width="180" label="2-3分">
              <template slot-scope="scope">
                <span>{{ scope.row.Num3 }}人</span>
              </template>
            </el-table-column>
            <el-table-column min-width="180" label="3-4分">
              <template slot-scope="scope">
                <span>{{ scope.row.Num4 }}人</span>
              </template>
            </el-table-column>
            <el-table-column min-width="180" label="4-5分">
              <template slot-scope="scope">
                <span>{{ scope.row.Num5 }}人</span>
              </template>
            </el-table-column>
          </el-table>
        </a-tab-pane>
      </a-tabs>
    </div>
    <detail :messageID="MessageID" :nowTime="nowTime" v-show="detailIf" @closeFun="closeFun"></detail>
    <visit :messageID="MessageID" v-show="visitIf" @closeFun="closeFun"></visit>
  </div>
</template>

<script>
	import Func from '@/utils/func'
	import Cache from '@/utils/cache'
	import {
		comm
	} from '@/api/comm'
	import detail from './detail.vue'
	import visit from './returnVisit.vue'
	import {
		getVisitList,
		deleteVisit,
		getStatistics
	} from '@/api/follow'
	const data = []
	export default {
		components: {
			detail,
			visit
		},
		data() {
			return {
				tableData: [],
				tableData1: [],
				tableHeight: parseFloat(window.innerHeight - 160),
				Teamstate: [{
						ID: 0,
						Name: '-团队状态-'
					},
					{
						ID: 1,
						Name: '正常'
					},
					{
						ID: 2,
						Name: '已删除'
					}
				],
				form: this.$form.createForm(this, {
					name: 'advanced_search'
				}),
				pagination: {
					currentPage: 1,
					pageSize: this.global.pageSize,
					pageSizeOptions: this.global.pageSizeOptions, // 每页中显示的数据
					showTotal: (total) => `共有 ${total} 条数据` // 分页中显示总的数据
				},
				detailIf: false,
				visitIf: false,
				text: {},
				visible: false,
				confirmLoading: false,
				itemId: '',
				selectid: 0,
				wareHouse: [],
				loading: false,
				typeValue: 4,
				MessageID: '',
				CenterDropdownList: [],
				values: {},
				menus: [],
				operation: [],
				nowTime: ''
			}
		},
		computed: {},
		created() {
			this._getList(4)
			this.menus = JSON.parse(localStorage.getItem('jurisdiction'))
			let i = this.menus.findIndex(d => d.Name === '回访管理')
			if (i != -1) {
				this.operation = this.menus[i].functionGroup[0].function
			}
		},
		mounted() {},
		methods: {
			detail(data, type) {
				this.MessageID = data.ID
				if (type == 1) {
					this.visitIf = !this.visitIf
				} else {
					this.detailIf = !this.detailIf
					this.nowTime = new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds()
				}
			},
			changeNum(value, type) {
				this.form.validateFields((error, values) => {
					if (values.score1 > values.score2) {
						this.form.resetFields('score2')
						this.$message.error('最小分值不能大于最大分值！')
						return false
					}
				})
			},
			callback(key) {
				this.tableData = []
				this.typeValue = key
				this.pagination.currentPage = 1
				this.values = {}
				this.form.resetFields()
				if (key == 4 || key == 6) {
					this._getList(this.typeValue)
				} else {
					this._getStatistics()
				}
			},
			async _getList(type, values) {
				let data = {}
				this.loading = true
				if (this.values) {
					data = this.values
				}
				data.pageIndex = this.pagination.currentPage
				data.pageSize = this.pagination.pageSize
				data.state = type
				if (this.values) {
					data = Object.assign(data, this.values)
				}
				let res = await getVisitList(data)
				this.loading = false
				this.tableData = res.data.data
				const pagination = { ...this.pagination
				}
				pagination.total = parseFloat(res.data.pageList.TotalItemCount)
				this.pagination = pagination
			},
			async _getStatistics(values) {
				let data = {}
				this.loading = true
				if (this.values) {
					data = this.values
				}
				delete data.state
				if (this.values) {
					data = Object.assign(data, this.values)
				}
				let res = await getStatistics(data)
				this.loading = false
				if (res.data.data.length > 0) {
					this.tableData1 = [{'Num1': res.data.data[0].Num, 'Num2': res.data.data[1].Num, 'Num3': res.data.data[2].Num, 'Num4': res.data.data[3].Num, 'Num5': res.data.data[4].Num}]
				}
			},
			deleteList(text) {
				let that = this
				this.$confirm({
					title: '提示',
					content: '此操作将永久删除该数据, 是否继续？',
					onOk() {
						that.handleOk(text.ID)
					},
					onCancel() {}
				})
			},
			async handleOk(ID) {
				let res = await deleteVisit({
					ID: ID
				})
				if (res.data.code === 0) {
					this.$message.success(res.data.msg)
					this._getList(this.typeValue)
				} else {
					this.$message.error(res.data.msg)
				}
			},
			handleSizeChange(val) {
				this.pagination.pageSize = val
				if (this.typeValue == 4 || this.typeValue == 6) {
					this._getList(this.typeValue)
				} else {
					this._getStatistics()
				}
			},
			handleCurrentChange(val) {
				this.pagination.currentPage = val
				if (this.typeValue == 4 || this.typeValue == 6) {
					this._getList(this.typeValue)
				} else {
					this._getStatistics()
				}
			},
			menu(s) {
				this.$router.push({
					name: s
				})
			},
			handleSearch(e) {
				e.preventDefault()
				this.form.validateFields((error, values) => {
					if (values['data']) {
						values.startTime = values.data[0].format('YYYY-MM-DD')
						values.endTime = values.data[1].format('YYYY-MM-DD')
					}
					delete values['data']
					this.pagination.currentPage = 1
					this.values = values
					if (this.typeValue == 4 || this.typeValue == 6) {
						this._getList(this.typeValue, values)
					} else {
						this._getStatistics(values)
					}
				})
			},
			handleReset() {
				this.values = {}
				this.form.resetFields()
				this._getList(this.typeValue)
			},
			handleCancel(e) {
				this.visible = false
			},
			closeFun(type) {
				this.detailIf = false
				this.visitIf = false
				if (type) {
					this._getList(this.typeValue)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	#return{
		padding: 10px 15px;
		margin-bottom: 15px;
		color: #000;
		background: rgb(245, 246, 247);
		span{
			cursor: pointer;
			&:hover{
				color: #075DB3;
			}
		}

	}
	.content {
		min-height: 100%;
		padding: 15px;
		background: #fff;
	}
	.btn1{
		margin-left: 15px;
	}
	.home-form {
		margin: 0 0 20px 0;
		padding-bottom: 15px;
		border-bottom: 1px solid #EBEEF5;
	}

	/deep/ .el-table th {
		background-color: #f4f4f5 !important;
		padding: 8px 5px !important;
	}

	/deep/.cell {
		.el-tag {
			cursor: pointer;
			margin-right: 10px;
			padding: 0 4px !important;
			&:last-child {
				margin-right: 0;
			}
		}
	}

	[class^=el-icon-] {
		margin-right: 5px;
		font-size: 16px;
	}

	/deep/.ant-form-item {
		display: flex;
		margin-bottom: 10px !important;

		/deep/.ant-form-item-label {
			width: 80px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			text-align: left;
		}

		/deep/.ant-form-item-control-wrapper {
			flex: 1;
		}
	}

	/deep/.el-table td,
	/deep/.el-table th {
		padding: 5px;
	}

	/deep/.el-table th.is-leaf {
		background: #fafafa;
	}

	.el-pagination {
		margin-top: 10px;
	}

	.option {
		margin-top: 10px;
		margin-bottom: 20px;
		overflow: hidden;
	}

	.option .btn {
		height: 36px;
		line-height: 36px;
		padding: 0 10px;
		float: left;
		background: #1890ff;
		color: #fff;
		margin-right: 10px;
		border-radius: 3px;
		cursor: pointer;
		border: none;
	}

	.foot {
		text-align: center;
		margin-top: 100px;
	}
</style>
